/*
 * @Author: Yuelei 
 * @Date: 2018-03-19 09:33:48 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-03-19 09:34:09
 */

//组件生命周期

import React from 'react';
import ReactDOM from 'react-dom';

class Component extends React.Component{
    // 构造函数
    constructor(props){
      console.log('constructor')
      super(props);
      this.state={
        data:'old state'
      }
      console.log('子组件初始化数据','construct')
    }
    // 组件将要加载
    componentWillMount(){
      console.log('componentWillMount')
    }
    // 组件加载完成
    componentDidMount(){
       console.log('componentDidMount')
    }
    // 更新组件

    // 组件即将接受父组件传来的props
    componentWillReceiveProps(){
      console.log('componentWillReceiveProps')
    }
    // 子组件是不是该更新（默认为true）
    shouldComponentUpdate(){
      console.log('shouldComponentUpdate');
      return true;
    }
    // 组件将要更新(shouldComponentUpdate为true)
    componentWillUpdate(){
      console.log('componentWillUpdate')
    }
    // 组件更新完成
    componentDidUpdate(){
      console.log('componentDidUpdate')
    }
    // 组件将要销毁
    componentWillUnmount(){
      console.log('componentWillUnmount')
    }
    
    handleClick(){
      console.log('update component(更新组件)')
      this.setState({
        data:'new state'
      })
    }

    render(){
      console.log('render')
        return (
          <div>
            <div>子组件</div>
            <div>Prop:{this.props.data}</div>
            <button onClick={()=>{this.handleClick()}}>更新组件</button>
          </div>
    );
  }
}

class App extends React.Component{
      // 构造函数
      constructor(props){
        console.log('constructor')
        super(props);
        this.state={
          data:'Old props',
          hasChild:true
        }
        console.log('父组件初始化数据','construct')
      }
      onPropsChange(){
        console.log('更新pr ops')
        this.setState({
          data:'New props'
        })
      }
      deleteChild(){
        // 销毁子组件函数
        this.setState({
          hasChild:false
        })
      }
  render (){
    return (
      <div>
        {
          this.state.hasChild?   <Component data={this.state.data}></Component>:null
        }
      
        <button onClick={()=>{this.onPropsChange()}}>改变props</button>
        <br/>
        <button onClick={()=>{this.deleteChild()}}>销毁子组件</button>
      </div>
    );
  }
}

ReactDOM.render(<App/>,
  document.getElementById('app')
)
